<template>
    <el-dialog v-model="DialogShow" width="40%" title="选择学生" center custom-class="custom_class ">
        <div class="main">
            <el-table ref="singleTableRef" :data="UserTableData" style="width: 100%">
                <el-table-column property="roleType" label="身份" align="center" width="80">
                    <template #default="{ row }">
                        <el-radio :value="row.id" v-model="selectUserId"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column property="userName" label="用户名" align="center" width="120" />
                <el-table-column property="phone" label="手机号" width="120" align="center" />

                <el-table-column property="roleType" label="身份" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.roleType === 0" type="success">管理员</el-tag>
                        <el-tag v-else-if="scope.row.roleType === 1" type="warning">老师</el-tag>
                        <el-tag v-else-if="scope.row.roleType === 2" type="info">学生</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <Pagination @getDate="getAllUserInfo" :queryNum="queryCount" />
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="DialogShow = false">取消</el-button>
                <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

import Pagination from "@/components/base/MyPagination.vue";
import useUserInfo from "store/useUserInfo.js";
import { ElMessage } from "element-plus";
import { queryUserListApi, addCourseStudentApi } from "@/api/index";

const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)
const props = defineProps(['show', 'courseId', 'roleType'])
const emit = defineEmits(['update:show', 'onSubmit'])

const DialogShow = ref(false)
watch(() => props.show, (newVal) => {

    if (!newVal) {
        selectUserId.value = null
    }
    DialogShow.value = newVal;
});
watch(() => DialogShow.value, (newVal) => {
    emit('update:show', newVal);
});

const UserTableData = ref([])
const loading = ref(false);
// 提交搜索条件
const queryCount = ref(1);
//获取全部数据
const getAllUserInfo = async (page) => {
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,

    };
    if (props.roleType) {
        params.roleType = props.roleType;
    }

    const res = await queryUserListApi(params);
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    UserTableData.value = res.data.list;
    page.totalCount = res.data.totalCount;
};

const selectUserId = ref(null)


const submitForm = async () => {
    if (!selectUserId.value) {
        ElMessage({
            showClose: true,
            message: "请选择学生",
            type: "error",
        });
        return;
    }
    const res = await addCourseStudentApi({
        courseId: props.courseId,
        userId: selectUserId.value
    })
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `添加成功!`,
        type: "success",
    });
    DialogShow.value = false;
    emit('onSubmit');
}

</script>

<style lang="scss"></style>